<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px  ; background: url("loader.gif");
    background-repeat: no-repeat;
    background-position: center;
}
    #map { height: 100% }
  </style>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Ovi Maps API Example</title>
    <script src="http://api.maps.ovi.com/jsl.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    var map;
    function initialize()
    {
     map = new ovi.mapsapi.map.Display(document.getElementById("mapDiv"), {
     components: [ new ovi.mapsapi.map.component.Behavior(), //behavior collection
                               new ovi.mapsapi.map.component.ZoomBar(),
                               new ovi.mapsapi.map.component.Overview(),
                               new ovi.mapsapi.map.component.TypeSelector(),
                               new ovi.mapsapi.map.component.ScaleBar() ],
        'zoomLevel': 10, //zoom level for the map
        'center': [52.51, 13.4] //center coordinates
        });
        map.addComponent( new ovi.mapsapi.map.component.panning.Drag() );
        map.addComponent( new ovi.mapsapi.map.component.panning.Kinetic() );
    }

     function pan( lat, lon ) {
     map.setCenter(new ovi.mapsapi.geo.Coordinate(lat,lon));
    }

    </script>
  </head>
  <body  onload="initialize()" bgcolor="#000000" text="#FFFFFF" >
    <div id="mapDiv" style="width:100%; height:100%;"></div>
    <script type="text/javascript">
    </script>
  </body>
</html>
